GermanWikipedia - /page/entry.mu

Micron Document

<!DOCTYPE html>

<title>JSX (JavaScript)</title>

</head>

<h1 id="firstHeading" class="firstHeading mw-first-heading">JSX (JavaScript)</h1>

</header>

</div>

<th colspan="2" class="hintergrundfarbe6" style="font-size:larger;">JSX

</th></tr>

<tr>

<td colspan="2" class="notheme" style="text-align:center; background-color:#f8f9fa;"><div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>const element = <h1>Hallo Welt!</h1>;

</pre></div>

</td></tr>

<tr>

<th colspan="2" class="hintergrundfarbe5" style="font-size:105%; text-align:center;">Basisdaten

</th></tr>

<tr>

<td>Erscheinungsjahr:

</td>

</td></tr>

<tr>

<td>Beeinflusst von:

</td>

<td><a href="JavaScript" title="JavaScript">JavaScript</a>, <a href="Hypertext_Markup_Language" title="Hypertext Markup Language">Hypertext Markup Language</a>, <a href="ECMAScript_for_XML" title="ECMAScript for XML">ECMAScript for XML</a><a href="#cite_note-_bf2c044dd45d9272-2">[2]</a>

</td></tr>

<tr>

<td><a href="Lizenz" title="Lizenz">Lizenz</a>:

</td>

<td>Creative Commons Namensnennung 4.0 International<a href="#cite_note-_710f1be3900b8a8b-3">[3]</a>

</td></tr>

<tr>

<td colspan="2" class="hintergrundfarbe5" style="text-align:center;"><a rel="nofollow" class="external text" href="https://facebook.github.io/jsx/">facebook.github.io/jsx/</a>

</td></tr></tbody></table>

JSX (JavaScript Syntax Extension oder gelegentlich JavaScript XML) ist eine <a href="Syntax" title="Syntax">Syntax</a>-Erweiterung für <a href="JavaScript" title="JavaScript">JavaScript</a> (<a href="Syntaktischer_Zucker" title="Syntaktischer Zucker">Syntaktischer Zucker</a>).<a href="#cite_note-4">[4]</a> JSX wurde für das Framework <a href="React" title="React">React</a> entwickelt und wird als <a href="Auszeichnungssprache" title="Auszeichnungssprache">Auszeichnungssprache</a> für <a href="Steuerelement" title="Steuerelement">Komponenten</a> verwendet.

<div class="mw-heading mw-heading2"><h2 id="Syntax">Syntax</h2></div>

JSX ist in seiner Syntax ähnlich zu <a href="Hypertext_Markup_Language" title="Hypertext Markup Language">Hypertext Markup Language</a>, wie das folgende Beispiel zeigt:<a href="#cite_note-5">[5]</a><div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>const user = "Max Mustermann";

const element = (

<div>

<h1 className="greeting">Hallo, {user}</h1>

</div>

);

</pre></div>

Beim <a href="Compiler" title="Compiler">Übersetzen</a> von JSX wird daraus der folgende React-JavaScript-Code mit erzeugt:<a href="#cite_note-6">[6]</a> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>const user = "Max Mustermann";

const element = React.createElement("div", {}, [

React.createElement("h1", { className: "greeting" }, ["Hallo, ", user]),

React.createElement("a", { href: "https://www.reactjs.org" }, ["link"])

]);

</pre></div>

Der folgende Beispielcode zeigt, wie man JSX in React mittels <code>ReactDOM.render()</code> einbetten kann.<a href="#cite_note-7">[7]</a><a href="#cite_note-8">[8]</a><a href="#cite_note-9">[9]</a> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>const name = 'Max Mustermann';

const element = <h1>Hallo, {name}</h1>;

ReactDOM.render(

element,

document.getElementById('root')

);

</pre></div>

<div class="mw-heading mw-heading3"><h3 id="Attribute">Attribute</h3></div>

Man benutzt meistens Anführungszeichen um string-Literale als Attribute zu verwenden:<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>const element = <a href="https://www.wikipedia.org"> link </a>;

</pre></div>Ebenfalls kann man geschweifte Klammern verwenden, um JavaScript-Ausdrücke in ein Attribut einzubinden:<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>const element = <img src={user.avatarUrl}></img>;

</pre></div>

<div class="mw-heading mw-heading3"><h3 id="Sicherheit_(XSS)">Sicherheit (XSS)</h3></div>

JSX verhindert Injection-Attacken wie <a href="Cross-Site-Scripting" title="Cross-Site-Scripting">Cross-Site-Scripting</a> (XSS). Es ist sicher, Benutzereingaben wie diese einzubetten:<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>const title = response.potentiallyMaliciousInput;

// Dies ist sicher:

const element = <h1>{title}</h1>;

</pre></div>Standardmäßig entschlüsselt React DOM alle in JSX eingebetteten Werte, bevor sie gerendert werden. Alles wird in eine <a href="Zeichenkette" title="Zeichenkette">Zeichenkette</a> konvertiert, bevor es gerendert wird.<a href="#cite_note-10">[10]</a>

<div class="mw-heading mw-heading3"><h3 id="Props_in_JSX">Props in JSX</h3></div>

Man kann einen beliebigen JavaScript-Ausdruck als Prop übergeben, indem man ihn mit <code>{}</code> umgibt. Zum Beispiel in diesem Code:<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><MyComponent foo={1 + 2 + 3 + 4} />

</pre></div>Für <code>MyComponent</code> wird der Wert von <code>props.foo</code> 10 sein, weil der Ausdruck 1 + 2 + 3 + 4 ausgewertet wird.

if-Anweisungen und for-Schleifen sind in <a href="JavaScript" title="JavaScript">JavaScript</a> keine Ausdrücke (sondern Anweisungen), daher können sie in JSX nicht direkt verwendet werden.<a href="#cite_note-11">[11]</a><a href="#cite_note-12">[12]</a>

Das Framework <a href="Vue.js" title="Vue.js">Vue.js</a> verwendet eine eigene Auszeichnungssprache, kann aber auf Wunsch mit JSX verwendet werden.<a href="#cite_note-13">[13]</a>

Zur Verwendung von JSX mit <a href="TypeScript" title="TypeScript">TypeScript</a> wird die <a href="Dateierweiterung" class="mw-redirect" title="Dateierweiterung">Dateierweiterung</a> <code>.tsx</code> verwendet.<a href="#cite_note-14">[14]</a>

<div class="mw-heading mw-heading2"><h2 id="Siehe_auch">Siehe auch</h2></div>

<ul><li><a href="JavaScript" title="JavaScript">JavaScript</a> und <a href="TypeScript" title="TypeScript">TypeScript</a></li>

<li><a href="React" title="React">React</a></li>

<li><a href="ECMAScript_for_XML" title="ECMAScript for XML">ECMAScript for XML</a></li></ul>

<div class="mw-heading mw-heading2"><h2 id="Einzelnachweise">Einzelnachweise</h2></div>

<li id="cite_note-_72c6d2f6dd0a574d-1"><a href="#cite_ref-_72c6d2f6dd0a574d_1-0">↑</a> <a rel="nofollow" class="external text" href="https://web.archive.org/web/20130729102230/http://facebook.github.io/react/"><cite style="font-style:italic">web.archive.org</cite>.</a>

</li>

<li id="cite_note-_bf2c044dd45d9272-2"><a href="#cite_ref-_bf2c044dd45d9272_2-0">↑</a> <a rel="nofollow" class="external text" href="https://facebook.github.io/jsx/#sec-prior-art"><cite style="font-style:italic">facebook.github.io</cite>.</a>

</li>

<li id="cite_note-_710f1be3900b8a8b-3"><a href="#cite_ref-_710f1be3900b8a8b_3-0">↑</a> <a rel="nofollow" class="external text" href="https://facebook.github.io/jsx/#sec-license"><cite style="font-style:italic">facebook.github.io</cite>.</a>

</li>

<li id="cite_note-4"><a href="#cite_ref-4">↑</a> <a rel="nofollow" class="external text" href="https://de.reactjs.org/docs/introducing-jsx.html">Einführung in JSX – React.</a> Abgerufen am 10. Juni 2022 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AJSX+%28JavaScript%29&rft.title=Einf%C3%BChrung+in+JSX+%E2%80%93+React&rft.description=Einf%C3%BChrung+in+JSX+%E2%80%93+React&rft.identifier=https%3A%2F%2Fde.reactjs.org%2Fdocs%2Fintroducing-jsx.html&rft.language=en">

</li>

<li id="cite_note-5"><a href="#cite_ref-5">↑</a> <a rel="nofollow" class="external text" href="https://facebook.github.io/jsx/">JSX.</a> In: facebook.github.io/jsx. 4. August 2022, abgerufen im Dezember 2022 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AJSX+%28JavaScript%29&rft.title=JSX&rft.description=JSX&rft.identifier=https%3A%2F%2Ffacebook.github.io%2Fjsx%2F&rft.date=2022-08-04&rft.language=en">

</li>

<li id="cite_note-6"><a href="#cite_ref-6">↑</a> <code><a rel="nofollow" class="external text" href="https://reactjs.org/docs/react-api.html#createelement">React.createElement</a></code>

</li>

<li id="cite_note-7"><a href="#cite_ref-7">↑</a> <a rel="nofollow" class="external text" href="https://t3n.de/consent?redirecturl=/news/eigentlich-jsx-wofuer-das-867296/">t3n – digital pioneers | Was ist JSX und wofür braucht man das?</a> Abgerufen am 10. Juni 2022.<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AJSX+%28JavaScript%29&rft.title=t3n+%E2%80%93+digital+pioneers+%7C+Was+ist+JSX+und+wof%C3%BCr+braucht+man+das%3F&rft.description=t3n+%E2%80%93+digital+pioneers+%7C+Was+ist+JSX+und+wof%C3%BCr+braucht+man+das%3F&rft.identifier=https%3A%2F%2Ft3n.de%2Fconsent%3Fredirecturl%3D%252Fnews%252Feigentlich-jsx-wofuer-das-867296%252F&rft.language=de">

</li>

<li id="cite_note-8"><a href="#cite_ref-8">↑</a> <a rel="nofollow" class="external text" href="https://www.letsreact.org/what-is-jsx/">What is JSX? How to use JavaScript with React? – Let's React.</a> Abgerufen am 10. Juni 2022 (amerikanisches Englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AJSX+%28JavaScript%29&rft.title=What+is+JSX%3F+How+to+use+JavaScript+with+React%3F+%E2%80%93+Let%27s+React&rft.description=What+is+JSX%3F+How+to+use+JavaScript+with+React%3F+%E2%80%93+Let%27s+React&rft.identifier=https%3A%2F%2Fwww.letsreact.org%2Fwhat-is-jsx%2F&rft.language=en-US">

</li>

<li id="cite_note-9"><a href="#cite_ref-9">↑</a> <a rel="nofollow" class="external text" href="https://de.reactjs.org/docs/introducing-jsx.html">Einführung in JSX – React.</a> Abgerufen am 10. Juni 2022 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AJSX+%28JavaScript%29&rft.title=Einf%C3%BChrung+in+JSX+%E2%80%93+React&rft.description=Einf%C3%BChrung+in+JSX+%E2%80%93+React&rft.identifier=https%3A%2F%2Fde.reactjs.org%2Fdocs%2Fintroducing-jsx.html&rft.language=en">

</li>

<li id="cite_note-10"><a href="#cite_ref-10">↑</a> <a rel="nofollow" class="external text" href="https://www.mariokandut.com/what-is-jsx-in-react/">What is JSX and why to use it?</a> Abgerufen am 10. Juni 2022 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AJSX+%28JavaScript%29&rft.title=What+is+JSX+and+why+to+use+it%3F&rft.description=What+is+JSX+and+why+to+use+it%3F&rft.identifier=https%3A%2F%2Fwww.mariokandut.com%2Fwhat-is-jsx-in-react%2F&rft.language=en">

</li>

<li id="cite_note-11"><a href="#cite_ref-11">↑</a> <a rel="nofollow" class="external text" href="https://reactjs.org/docs/components-and-props.html">Components and Props – React.</a> Abgerufen am 10. Juni 2022 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AJSX+%28JavaScript%29&rft.title=Components+and+Props+%E2%80%93+React&rft.description=Components+and+Props+%E2%80%93+React&rft.identifier=https%3A%2F%2Freactjs.org%2Fdocs%2Fcomponents-and-props.html&rft.language=en">

</li>

<li id="cite_note-12"><a href="#cite_ref-12">↑</a> <a rel="nofollow" class="external text" href="https://reactjs.org/docs/jsx-in-depth.html">JSX In Depth – React.</a> Abgerufen am 10. Juni 2022 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AJSX+%28JavaScript%29&rft.title=JSX+In+Depth+%E2%80%93+React&rft.description=JSX+In+Depth+%E2%80%93+React&rft.identifier=https%3A%2F%2Freactjs.org%2Fdocs%2Fjsx-in-depth.html&rft.language=en">

</li>

<li id="cite_note-13"><a href="#cite_ref-13">↑</a> <a rel="nofollow" class="external text" href="https://vuejs.org/guide/extras/render-function.html#jsx-tsx">Render Functions & JSX.</a> In: Vue.js. Abgerufen im Dezember 2022 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AJSX+%28JavaScript%29&rft.title=Render+Functions+%26+JSX&rft.description=Render+Functions+%26+JSX&rft.identifier=https%3A%2F%2Fvuejs.org%2Fguide%2Fextras%2Frender-function.html%23jsx-tsx&rft.language=en">

</li>

<li id="cite_note-14"><a href="#cite_ref-14">↑</a> <a rel="nofollow" class="external text" href="https://www.typescriptlang.org/docs/handbook/jsx.html">JSX.</a> In: TypeScript Handbook. Abgerufen im Dezember 2022 (englisch).<span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AJSX+%28JavaScript%29&rft.title=JSX&rft.description=JSX&rft.identifier=https%3A%2F%2Fwww.typescriptlang.org%2Fdocs%2Fhandbook%2Fjsx.html&rft.language=en">

</li>

</ol></div><div><div class="zim-footer">

Dieser Artikel wurde von <a class="external text" title="Zuletzt bearbeitet am 2023-09-12" href="https://de.wikipedia.org/wiki/?title=JSX_(JavaScript)&oldid=237259537">Wikipedia</a> herausgegeben. Der Text ist unter <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">Creative Commons Attribution-Share Alike 4.0</a> verfügbar, sofern nicht anders angegeben. Für die Mediendateien können zusätzliche Bedingungen gelten.

</div>

</div></div>

</div>

</main>

</div>

</body></html>